<template>
  <div class="messagePush">
    <div class="nav">
      <img src="../../assets/marketing/pic_dxyx@2x.png" class="image" alt="" />

      <!-- 选择区域 -->
      <div class="select">
        <div class="left">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="区域筛选">
              <el-select v-model="form.area" placeholder="请选择">
                <el-option
                  v-for="item in areaoptions"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="终端筛选">
              <el-select v-model="form.region" placeholder="请选择">
                <el-option
                  v-for="item in zdoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button @click="inquire">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="right">
          <button class="pushButton button" @click="toPromote">去推广</button>
        </div>
      </div>
    </div>

    <!-- 推送列表 -->
    <div class="pushList">
      <div class="apply_table">
        <div class="apply_table_column">
          <div class="checkAll">
            <div>
              <input
                type="checkbox"
                @click="clickAllItem"
                v-model="clickAll"
              />全选
            </div>
          </div>

          <div
            class="apply_table_title"
            v-for="(item, index) in tableColumn"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <el-divider></el-divider>
        <div
          class="apply_table_info"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div class="apply_info_box">
            <div class="check">
              <div>
                <input
                  type="checkbox"
                  @click="check(item)"
                  v-model="item.check"
                />
              </div>
            </div>
            <div class="apply_info_text">{{ item.companyName }}</div>
            <div class="apply_info_text">
              {{ item.theMainClassification }}
            </div>
            <div class="apply_info_text">
              <!-- {{item.companySite}} -->
              {{ item.siteProvince }}{{ item.siteCity }}
            </div>
            <div class="apply_info_text">{{ item.linkman }}</div>
            <div class="apply_info_text">{{ item.mobile }}</div>
            <div class="apply_info_text">{{ item.fixedTelephone }}</div>
            <div class="apply_info_btn">
              <button class="btn_push" @click="singlePromote(item.id)">
                推广
              </button>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
    </div>

    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total"
      v-if="tableData.length > 0"
    >
    </el-pagination>

    <div class="test" v-else>暂无相关数据</div>

    <!-- 推广弹窗 -->
    <el-dialog
      :visible.sync="pushDialog"
      width="38%"
      center
      class="add_dialog"
      @close="abolish"
    >
      <p>
        本月剩余<span> {{ count.remainingNumber }}</span> 条，您已累计投递<span>
          {{ count.totalNumber }}</span
        >
        条。
      </p>
      <p>
        您将向<span>
          {{
            this.intoTheTerminalIdList.length == 0
              ? 1
              : this.intoTheTerminalIdList.length
          }}</span
        >
        家企业投递名片。
      </p>

      <div class="line"></div>
      <span>您好！我是</span>
      <el-input v-model="input" placeholder="请输入公司名称"></el-input>的
      <el-input v-model="name" placeholder="请输入姓名"></el-input>
      <p>希望与贵公司进行合作</p>
      <p>我<span>递名片的意向</span> 是：</p>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入合作意向内容例：我公司主管各塑料原料。宁波ABS121等期待您的合作。"
        v-model="textarea"
      >
      </el-input>
      <p>请与我联系！</p>
      <span>我的联系方式是</span
      ><el-input v-model="contactWay" placeholder="请输入联系方式"></el-input>
      <p>谢谢！</p>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">发送</el-button>
      </span>
    </el-dialog>

    <!-- 确定弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="sureDialog"
      width="5.71rem"
      center
      class="sure_dialog button"
      @close="cancelPromote"
    >
      <p>是否提交推广名片？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelPromote">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </el-dialog>

    <!-- 等级不足弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="levelDialog"
      width="5.71rem"
      center
      class="level_dialog button"
    >
      <p>只有优塑会员才有推广权限哦~</p>
      <p>开通优塑会员马上进行推广！</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="levelDialog = false">取消</el-button>
        <el-button type="primary" @click="gotoOpen">开通优塑会员</el-button>
      </span>
    </el-dialog>

    <!-- 开通会员二维码 -->
    <el-dialog
      title="开通会员二维码"
      :visible.sync="openDialog"
      width="5.71rem"
      center
      class="openDialog button"
    >
      <img :src="this.openUrl | urlLoad" class="qrcode" alt="" />
    </el-dialog>

    <!-- 会员收费二维码 -->
    <el-dialog
      title="会员收费二维码"
      :visible.sync="chargeDialog"
      width="5.71rem"
      center
      class="chargeDialog button"
      @close="close"
    >
      <img :src="this.codeUrl | urlLoad" class="qrcode" alt="" />
    </el-dialog>

    <!-- 短信收费弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="tollDialog"
      width="5.71rem"
      center
      class="toll_dialog button"
    >
      <p>
        您勾选的推广数量已超出可选数量<span>共计{{ promoteTheNumber }}</span
        >条，请重新勾选
      </p>
      <p>
        或者支付超出数量的推广费用，<span>￥{{ unitPrice }}</span
        >/条
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tollDialog = false">重新勾选</el-button>
        <el-button type="primary" @click="gopay"
          >去支付￥{{ payPrice }}元</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import regionJson from "@/json/region";

export default {
  name: "messagePush",
  data() {
    return {
      form: {
        area: "",
        region: "",
      },
      areaoptions: [],
      zdoptions: [
        { value: "全部" },
        { value: "塑胶玩具" },
        { value: "塑胶电器" },
        { value: "塑胶电子" },
        { value: "塑胶制品" },
        { value: "塑胶原料" },
        { value: "再生塑料" },
        { value: "改性塑料" },
        { value: "塑料助剂" },
      ],
      tableColumn: [
        "公司名称",
        "主营",
        "公司地址",
        "负责人",
        "手机号码",
        "电话",
        "操作",
      ],
      tableData: [],
      pushDialog: false,
      sureDialog: false,
      levelDialog: false,
      chargeDialog: false,
      tollDialog: false,
      openDialog: false,
      clickAll: false,
      input: "",
      name: "",
      textarea: "",
      contactWay: "",
      pageNo: 1,
      pageSize: 10,
      total: 0,
      userInfo: {},
      count: "",
      id: "",
      intoTheTerminalIdList: [],
      sureList: [],
      orderInfo: {},
      noSendId: "",
      unitPrice: 0, //单价
      payPrice: 0, //支付价格
      promoteTheNumber: 0, //超出数量
      codeUrl: "",
      openUrl: "",
    };
  },
  created() {
    this.messageMakreting();
    this.areaoptions = regionJson;
    this.TempleteDetail();
    this.statisticCount();
  },
  methods: {
    // 查询
    inquire() {
      this.pageNo = 1;
      this.messageMakreting();
    },
    // 营销列表
    async messageMakreting() {
      this.clickAll = false;
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        siteProvince: this.form.area,
        theMainClassification: this.form.region,
      };
      if (this.form.area == "全国") {
        params.siteProvince = "";
      }
      if (this.form.region == "全部") {
        params.theMainClassification = "";
      }
      let res = await this.$apiFun.messageMakreting(params);
      this.tableData = res.result.rows.map((item) => {
        return { ...item, show: false };
      });
      this.total = Number(res.result.total);
      
      // 切换页面时，之前打勾的保留勾选状态
      let IndexList = [];
      let isAllcheck = this.tableData.length == 0 ? false : true
      for(let num in this.tableData){
        for(let i =0;i<this.intoTheTerminalIdList.length;i++){
          if(this.tableData[num].id == this.intoTheTerminalIdList[i].id){
            IndexList.push(num)
            this.tableData[num].check = true
          }
        }
        if (!this.tableData[num].check){
          isAllcheck = false
        }
      }
      this.clickAll = isAllcheck
    },

    // 推广弹窗内容
    async TempleteDetail() {
      let params = {};
      let res = await this.$apiFun.TempleteDetail(params);
      if (res.code == 200) {
        this.input = res.result.companyName || "";
        this.name = res.result.name || "";
        this.textarea = res.result.content || "";
        this.contactWay = res.result.memberMobile || "";
      }
    },

    // 页面切换
    handleCurrentChange(value) {
      this.pageNo = value;
      this.messageMakreting();
    },

    // 单独推广
    singlePromote(id) {
      this.sureList = [id];
      this.pushDialog = true;
    },

    // 批量推广
    toPromote() {
      // var flag = this.tableData.some((item1) => item1.check);
      if (this.intoTheTerminalIdList.length > 0) {
        this.pushDialog = true;
      } else {
        this.$message.error("请选择要推广的选项");
      }
      // console.log("批量推广", this.intoTheTerminalIdList);
    },

    // 点击全选
    clickAllItem() {
      this.clickAll = !this.clickAll;
      if (this.clickAll) {
        // const group = []
        for (let item of this.tableData) {
          item.check = this.clickAll;
          if (
            this.intoTheTerminalIdList.findIndex(
              (operation) => operation.id == item.id
            ) == -1
          ) {
            this.intoTheTerminalIdList.push(item);
          }
        }
      } else {
        for (let item of this.tableData) {
          item.check = this.clickAll;
        }
        // 切换页面时，之前打勾的保留勾选状态
        let isAllcheck = this.tableData.length == 0 ? false : true;
        for (let num in this.tableData) {
          for (let i = 0; i < this.intoTheTerminalIdList.length; i++) {
            if (this.tableData[num].id == this.intoTheTerminalIdList[i].id) {
              this.intoTheTerminalIdList.splice(i, 1);
            }
          }
          if (!this.tableData[num].check) {
            isAllcheck = false;
          }
        }

        this.clickAll = isAllcheck;
      }
      // console.log("全选", this.intoTheTerminalIdList);
    },

    // 单独选中某项
    check(item) {
      // console.log("单点",this.intoTheTerminalIdList);
      item.check = !item.check;
      var flag = this.tableData.some((item1) => !item1.check);

      this.clickAll = !flag;
      if (item.check) {
        this.intoTheTerminalIdList.push(item);
        // this.intoTheTerminalIdList有数据且 操作是取消勾选
      } else {
        let result = this.intoTheTerminalIdList.findIndex(
          (oper) => oper.id == item.id
        );
        if (result !== -1) {
          this.intoTheTerminalIdList.splice(result, 1);
        }
      }
    },

    //本月剩余和累计投递条数
    async statisticCount() {
      let res = await this.$apiFun.statisticCount();
      this.count = res.result;
      // console.log("本月剩余和累计投递条数", this.count);
    },

    // 提交推广
    async submit() {
      var reg_tel =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      if (!reg_tel.test(this.contactWay)) {
        this.$message.error("请输入正确的手机号码");
      } else if (this.input == "" || this.name == "" || this.textarea == "") {
        this.$message.error("请填写完整信息");
      } else {
        this.pushDialog = false;
        this.sureDialog = true;
      }
    },

    // 确定推广
    async confirm() {
      let info = JSON.parse(sessionStorage.getItem("userInfo"));
      this.userInfo = info;
      if (this.userInfo.identityType < 3) {
        this.sureDialog = false;
        this.levelDialog = true;
      } else {
        this.sureDialog = false;
        for (let i = 0; i < this.intoTheTerminalIdList.length; i++) {
          this.sureList.push(this.intoTheTerminalIdList[i].id);
        }
        // console.log("sureList", this.sureList);

        let params = {
          intoTheTerminalIdList: this.sureList,
        };
        let res = await this.$apiFun.newOrder(params);
        this.orderInfo = res.result;
        if (this.orderInfo.status == "PAY") {
          this.sendPromote();
        } else if (this.orderInfo.status == "UNPAY") {
          this.tollDialog = true;
          this.unitPrice = res.result.unitPrice / 100;
          this.payPrice = res.result.payPrice / 100;
          this.promoteTheNumber = res.result.promoteTheNumber;
        }
      }
    },

    // 支付成功后推广
    async sendPromote() {
      let params = {
        theDeliveryRecordId: this.orderInfo.id || this.noSendId,
        companyName: this.input,
        name: this.name,
        content: this.textarea,
        mobile: this.contactWay,
        allContent:
          "您好！我是" +
          this.input +
          "的" +
          this.name +
          "。希望与贵公司进行合作。我递名片的意向是：" +
          this.textarea +
          "请与我联系！我的联系方式是" +
          this.contactWay +
          "，谢谢！",
      };
      let res = await this.$apiFun.sendPromote(params);
      if (res.code == 200) {
        this.$message({
          type: "success",
          duration: 1500,
          message: "已发送成功",
        });
        this.sureDialog = false;
        this.sureList = [];
        this.intoTheTerminalIdList = [];
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].check = false;
        }
        this.statisticCount();
      } else {
        this.checkRecord();
        this.sureDialog = false;
      }
    },

    abolish() {
      this.pushDialog = false;
    },

    cancelPromote() {
      this.sureDialog = false;
      // this.intoTheTerminalIdList = [];
      this.sureList = [];
    },

    // 查询是否有已支付未发送的记录
    async checkRecord() {
      let res = await this.$apiFun.checkRecord();
      // console.log(res);
      if (res.code == 200) {
        this.noSendId = res.result;
        this.sendPromote(this.noSendId);
      }
    },

    // 开通会员
    gotoOpen() {
      this.levelDialog = false;
      this.openDialog = true;
      this.openMember();
    },

    // 开通会员二维码
    async openMember() {
      let params = {
        orderIdOrSN: "1",
        payType: "WXNATIVE",
        tradeType: "NATIVE",
      };
      let info = JSON.parse(sessionStorage.getItem("userInfo"));
      this.userInfo = info;

      if (this.userInfo.hasSupplierInformation == 1) {
        let res = await this.$apiFun.openMember(params);
        if (res.code == 200) {
          this.openUrl = res.result;
        }
        // this.payReturn()
      } else {
        this.$message({
          type: "error",
          message: "当前您还没入驻供应商，请先入驻供应商",
          duration: 1500,
        });
        this.openDialog = false;

        setTimeout(() => {
          this.$router.push("supplier_enter");
        }, 2000);
      }
    },

    // 支付
    gopay() {
      this.tollDialog = false;
      this.chargeDialog = true;
      this.payOrder();
    },

    async payOrder() {
      let params = {
        tradeType: "NATIVE",
        payType: "WXNATIVE",
        orderIdOrSN: this.orderInfo.id || this.noSendId,
        // wxOpenId:this.orderInfo.memberId
      };
      let res = await this.$apiFun.payOrder(params);
      if (res.code == 200) {
        this.codeUrl = res.result;
        this.tollDialog = this.sureDialog = false;
      }
    },

    // 关闭二维码
    close() {
      // console.log(123);
      this.checkRecord();
    },
  },
  watch: {
    "$route.name": {
      handler() {
        // console.log("logName",this.$route.name);
        if (this.$route.name == "message_marketing") {
          this.clickAll = false;
          this.intoTheTerminalIdList = [];
          this.sureList = [];
          this.pageNo = 1;
          this.form.area = "";
          this.form.region = "";
          this.messageMakreting();
          for (let i = 0; i < this.tableData.length; i++) {
            this.tableData[i].check = false;
          }
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
// 选择区域样式
/deep/ .el-form {
  display: flex;
  justify-content: space-between;

  .el-form-item__label {
    width: 1.25rem !important;
    font-size: 0.18rem;
    font-weight: bold;
    color: #333333;
    padding: 0 0.28rem 0 0;
  }
  .el-form-item__content {
    margin-left: 1.25rem !important;
  }

  .el-input {
    width: 90%;
    height: 0.4rem;
    line-height: 0.4rem;
    .el-input__inner {
      height: 100%;
    }
    .el-select__caret {
      line-height: 0.4rem;
    }
  }
  .el-button--default {
    width: 1rem;
    height: 0.4rem;
    line-height: 0.1rem;
    background: #f42551;
    border: none;
    border-radius: 5px;
    font-size: 0.18rem;
    font-weight: bold;
    color: #ffffff;
  }
}
/deep/ .el-select-dropdown .el-popper {
  min-width: 1.97rem;
}

// 推送弹窗样式
/deep/.el-dialog {
  margin-top: 2rem !important;
  border-radius: 10px;
  .el-dialog__body {
    padding: 0.05rem 0.5rem 0.3rem;
  }

  .el-dialog__header {
    border-radius: 10px 10px 0px 0px;
    background: #efefef;
    padding: 0.25rem 0.2rem;
  }

  .el-dialog__footer {
    height: 0.7rem;
    padding: 0;
    .dialog-footer {
      width: 100%;
      height: 0.4rem !important;
      display: flex;
      justify-content: center;

      .el-button--default {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 5px;
        display: block;
      }
      .el-button--primary {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #f42551;
        border-radius: 5px;
        border: none;
        margin-left: 0.3rem;
        display: block;
      }
    }
  }
}

.messagePush {
  .nav {
    .image {
      width: 100%;
      margin-bottom: 0.2rem;
    }

    // 选择区域
    .select {
      display: flex;
      // height: 0.4rem;
      .left {
        width: 80%;
      }

      .right {
        width: 20%;
        display: flex;
        justify-content: flex-end;
        .button {
          width: 1rem;
          height: 0.4rem;
          line-height: 0.1rem;
          background: #ffffff;
          border-radius: 5px;
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          cursor: pointer;
        }
        .pushButton {
          border: 1px solid #f42551;
          color: #f42551;
        }
      }
    }
  }

  // 推送列表
  .pushList {
    .apply_table {
      margin-top: 0.5rem;
      .apply_table_column {
        display: flex;
        font-size: 0.16rem;
        font-weight: bold;
        color: #333333;
        text-align: center;
        .checkAll {
          width: 0.817rem;
          input[type="checkbox"] {
            margin: 0 0.02rem;
          }
        }
        .apply_table_title {
          width: 1.226rem;
        }
        .apply_table_title:nth-child(2) {
          width: 1.88rem;
        }
        .apply_table_title:nth-child(6),
        .apply_table_title:nth-child(7) {
          width: 1.571rem;
        }
      }
      .apply_table_info {
        .apply_info_box {
          display: flex;
          position: relative;
          padding-left: 1.25%;
          align-items: center;
          .check {
            width: 3%;
            margin-right: 3.5%;
            input[type="checkbox"] {
              display: block;
            }
          }
          .apply_info_text {
            width: 1.241rem;
            font-size: 0.16rem;
            font-weight: 400;
            color: #333333;
            line-height: 0.3rem;
            text-align: center;
          }
          .apply_info_text:nth-child(2) {
            width: 1.878rem;
          }
          .apply_info_text:nth-child(6),
          .apply_info_text:nth-child(7) {
            width: 1.57rem;
          }

          .apply_info_btn {
            width: 1.26rem;
            height: 0.3rem;
            display: flex;
            justify-content: space-evenly;

            .btn_push {
              background: none;
              border: none;
              font-size: 0.16rem;
              font-weight: bold;
              color: #f42551;
              line-height: 0.3rem;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .test {
    font-size: 0.2rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 1rem;
    text-align: center;
    margin-top: 0.2rem;
  }

  // 推送弹窗
  .add_dialog {
    /deep/ .el-dialog__body,
    /deep/ .el-input__inner {
      font-size: 0.2rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      .line {
        width: 100%;
        height: 1px;
        background: #efefef;
        border-radius: 1px;
        margin: 0.25rem 0;
      }
      .el-input {
        width: 39.5%;
        height: 0.4rem;
        .el-input__inner {
          height: 100%;
        }
      }
      .el-input:nth-child(3) {
        width: 25%;
      }

      .el-textarea {
        height: 1.5rem;
        .el-textarea__inner {
          font-size: 0.2rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
          line-height: 0.3rem;
          height: 100%;
        }
      }
    }
    p {
      margin: 10px 0;
      span {
        color: #f42551;
      }
    }
  }

  .sure_dialog,
  .level_dialog,
  .chargeDialog,
  .toll_dialog,
  .openDialog {
    font-family: Microsoft YaHei;
    /deep/ .el-dialog__header {
      padding: 0.2rem 0.2rem;
      .el-dialog__title {
        font-size: 0.2rem;
        font-weight: bold;
        color: #333333;
        display: block;
      }
    }
    /deep/ .el-dialog__body {
      padding: 0.2rem 0.35rem 0.3rem;
      font-size: 0.2rem;
      text-align: center;
      font-weight: 400;
      color: #333333;
      .qrcode {
        width: 1.8rem;
        height: 1.8rem;
      }
      span {
        color: #f42551;
        font-weight: bold;
      }
    }
    /deep/ .el-button--default {
      width: 2rem;
      border: 1px solid #333333;
      border-radius: 5px;
      font-size: 0.16rem;
      font-weight: bold;
      color: #333333;
    }
    p {
      margin: 0.05rem auto;
    }
  }

  .toll_dialog {
    /deep/ .el-dialog__body {
      text-align: left;
    }
  }
}
// 分页样式
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f42551;
}
</style>